<template>
  <div class="list-container">
    <van-sticky :offset-top="46">
      <div class="search-wrap">
        <van-search
          v-model="search_value"
          show-action
          placeholder="请输入要搜索的内容"
        >
          <template #action>
            <van-button
              class="search-btn"
              type="info"
              size="small"
              style="width: 60px; position: relative; bottom: 2px"
              @click="onSearch"
              >搜索</van-button
            >
          </template>
        </van-search>
      </div>
    </van-sticky>
    <div class="content-wrap">
      <van-list v-model="loading" :finished="true" finished-text="没有更多了">
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="list-item">
            <van-image
              width="50"
              height="50"
              class="avatar"
              :src="item.img_src"
            />
            <div class="right">
              <div class="content">
                <p>
                  <span v-for="(itm, idx) in item.line1text" :key="idx">{{
                    itm
                  }}</span>
                </p>
                <p>{{ item.line2text }}</p>
                <p>{{ item.line3text }}</p>
              </div>
              <van-icon
                class="left-arrow"
                name="arrow"
                size="20"
                @click="showDeitals(item)"
              />
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <div class="add-btn-wrap" @click="handleAdd">
      <van-icon name="add-o" size="30" />
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      search_value: "",
      loading: false,
    };
  },
  methods: {
    onSearch() {},
    handleAdd() {
      this.$emit("add");
    },
    showDeitals(item) {
      this.$emit("detials", item);
    },
  },
};
</script>

<style>
.list-container {
  padding: 5px;
}
.search-wrap .search-btn {
  margin: 0 5px;
}
.content-wrap .list-item {
  display: flex;
  justify-content: space-between;
}
.content-wrap .list-item .right {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-wrap .list-item .right .content {
  width: 90%;
}
.content-wrap .list-item .right .content span {
  margin-right: 14px;
}
.add-btn-wrap {
  position: fixed;
  bottom: 60px;
  right: 30px;
  background-color: #fff;
}
</style>
